<template>
  <MainSlot v-loading="loading">
    <template v-slot:searchForm>
      <div class="all-count">
        <div class="allbox">
          <div class="left"></div>
          <div class="right">
            <div>总数量</div>
            <div>{{ count1 }}</div>
          </div>
        </div>
        <div class="allbox">
          <div class="left"></div>
          <div class="right">
            <div>总结存数量</div>
            <div>{{ count2 }}</div>
          </div>
        </div>
      </div>
    </template>
    <template v-slot:tab>
      <EnumSlot @handleEvent="getEnumEvent" :selectIndex="selectIndex" :enumList="enumList"></EnumSlot>
    </template>
    <template v-slot:table>
      <el-row :gutter="10">
        <el-col :span="4">
          <TableData :tableThead="tableThead_left" :dataList="dataList_left" :loading="loading"
            @selection-change="selectionChange" @sort-change="sortChange" @row-click="rowLeftClick" :total="total"
            :openColumn="false">
          </TableData>
        </el-col>
        <el-col :span="20">
          <TableData :tableThead="tableThead" :dataList="dataList" :loading="loading" @sort-change="sortChange"
            :openColumn="false">
            <template v-slot:num="{ row }">
              <span>{{ row.num || "--"
                }}{{ row.castUnit ? row.castUnit.symbol : "" }}</span>
            </template>
            <template v-slot:onHandQuantity="{ row }">
              <span>{{ row.onHandQuantity || "--"
                }}{{ row.cUnit ? row.cUnit.symbol : "" }}</span>
            </template>
            <template v-slot:lotNumber="{ row }">
              <span>{{
    row.batchFile ? row.batchFile.lotNumber || "--" : "--"
  }}</span>
            </template>
            <template v-slot:batchtime="{ row }">
              <span>{{
    row.batchFile ? row.batchFile.batchtime || "--" : "--"
  }}</span>
            </template>
            <template v-slot:produceDate="{ row }">
              <span>{{
    row.batchFile ? row.batchFile.produceDate || "--" : "--"
  }}</span>
            </template>
            <template v-slot:expirationDate="{ row }">
              <span>{{
    row.batchFile ? row.batchFile.expirationDate || "--" : "--"
                }}</span>
            </template>
          </TableData>
        </el-col>
      </el-row>
    </template>
  </MainSlot>
</template>
<script>
import MainSlot from "@/components/MainSlot";
import Pagination from "@/components/Pagination";
import SearchForm from "@/components/SearchForm";
import TableData from "@/components/TableData";
import BtnSlot from "@/components/BtnSlot";
import EnumSlot from "@/components/EnumSlot";
import AddEdit from "./components/addEdit";
import stationManage from "@/api/basicInformationOperate/stationManage";
import quantityApi from "@/api/livestock-manage/storage-manage/quantity-on-hand";

import warehouseApi from "@/api/digtalOperation/warehouseManage";
export default {
  components: {
    MainSlot,
    Pagination,
    SearchForm,
    TableData,
    BtnSlot,
    AddEdit,
    EnumSlot,
  },
  data() {
    return {
      stordocNo: "",
      materialNo: "",
      count1: 0,
      count2: 0,
      loading: false,
      dialogVisible: false,
      addEditFlag: "add",
      formData: {},
      searchFormData: {},
      selectionList: [],
      page: 1,
      total: 10,
      dataList: [],
      dataList_left: [],
      selectIndex: 0,
      enumList: [],
      tableThead_left: [{ isShow: true, label: "物料", prop: "materialName" }],
      tableThead: [
        { isShow: true, label: "行号", prop: "batchNo" },
        { isShow: true, label: "批号", slotName: "lotNumber" },
        { isShow: true, label: "数量", slotName: "num" },
        { isShow: true, label: "结算量", slotName: "onHandQuantity" },
        { isShow: true, label: "换算率", prop: "changerate" },
        { isShow: true, label: "批次生成时间", slotName: "batchtime" },
        { isShow: true, label: "生产日期", slotName: "produceDate" },
        { isShow: true, label: "失效日期", slotName: "expirationDate" },
      ],
      formItemList: [
        {
          label: "岗位名称",
          type: "input",
          param: "postName",
          clearable: true,
          isShow: true,
        },
      ],
    };
  },
  mounted() {
    // this.queryPageByCondition();
    this.getwarehouse();
  },
  methods: {
    getwarehouse() {
      warehouseApi
        .conditionQuery({})
        .then((res) => {
          if (res.code == 1) {
            if (res.data.length == 0) {
              this.$message.warning("请先在仓库管理中添加仓库");
            } else {
            }
            this.enumList = res.data.map((el) => {
              return { ...el, label: el.stordocName };
            });
            if (res.data.length > 0) {
              this.getMaterialType(res.data[0].stordocNo);
              this.stordocNo = res.data[0].stordocNo;
            }
          } else {
            this.$message.warning(res.msg || "仓库列表查询失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    queryPageByCondition() {
      this.loading = true;
      let params = {
        stordocNo: this.stordocNo || -1,
        materialNo: this.materialNo || -1,
      };
      quantityApi.conditionQuery(params).then((res) => {
        this.loading = false;
        let data = res.data;
        let count1 = 0,
          count2 = 0;
        data.map((el) => {
          count1 += el.num;
          count2 += el.onHandQuantity;
        });
        if (data[0] && data[0].castUnit?.symbol) {
          count1 += data[0].castUnit.symbol;
          count2 += data[0].castUnit.symbol;
        }
        this.count1 = count1;
        this.count2 = count2;
        // 赋值总条数
        if (data) {
          // this.totalSize = data.totalElements;
          // 赋值数组
          this.dataList = data;
        }
      });
    },
    // queryPageByCondition() {
    //   let params = {
    //     page: this.page,
    //     size: 10,
    //     entity: { ...this.searchFormData },
    //   };
    //   stationManage
    //     .queryPageByCondition(params)
    //     .then((res) => {
    //       if (res.code == 1) {
    //         this.dataList = res.data.content || [];
    //         this.total = res.data.totalElements;
    //         if (res.data.totalPages && this.page > res.data.totalPages) {
    //           this.page = res.data.totalPages;
    //           this.queryPageByCondition();
    //         }
    //       } else {
    //         this.$message.warning(res.msg || "分页查询失败");
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    //获取选中Enum
    getEnumEvent(enumInfo) {
      this.page = 1;
      this.selectIndex = enumInfo.index || 0;
      console.log(enumInfo, "enumInfo");
      this.stordocNo = enumInfo.data.stordocNo;
      this.getMaterialType(this.stordocNo);
    },
    getMaterialType(e) {
      quantityApi.queryCheckNo(e).then((res) => {
        this.dataList_left = res.data || [];
        if (this.dataList_left?.length > 0) {
          const { materialNo } = res.data[0];
          this.materialNo = materialNo;
          this.setCurrent({ ...this.dataList_left[0] });
          this.queryPageByCondition();
        } else {
          this.queryPageByCondition();
        }
        // this.queryPageByCondition(res.data[0])

        // 表格填充
        let havline = this.dataList_left.length % this.pageSize;
        if (this.dataList_left.length < this.pageSize) {
          if (havline < this.pageSize) {
            const remain = this.pageSize - havline;
            for (var i = 0; i < remain; i++) {
              this.dataList_left.push({
                index: i + this.dataList_left.length + 1,
              });
            }
          }
        }
      });
    },
    rowLeftClick({ materialNo }) {
      this.dataList = [];
      this.materialNo = materialNo;
      this.queryPageByCondition();
    },
    setCurrent(row) {
      // this.$n
      this.$nextTick(() => {
        console.log(row, "setCurrent");
        // this.$refs.dataList_left.setCurrentRow(this.dataList_left[0], true);
      });
    },
    //搜索
    search(data) {
      this.page = 1;
      this.searchFormData = { ...this.searchFormData, ...data };
      this.queryPageByCondition();
    },
    handleCurrentChange(page) {
      console.log(page);
    },
    // 多选方法
    selectionChange(val) {
      this.selectionList = val || [];
    },
    delList(deleteList = [], key = "postNo") {
      let list = [];
      deleteList.forEach((item) => {
        list.push(item[key]);
      });
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await stationManage.delListById(list);
          if (res.code == 1) {
            this.$message.success(res.msg || "删除成功");
            this.queryPageByCondition();
          } else {
            this.$message.warning(res.msg || "删除失败");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 排序方法
    sortChange(val) {
      console.log(val, "sortChange");
    },
    //获取选中Btn
    getBtnEvent(flag) {
      console.log(flag);
      if (flag == "add") {
        this.dialogVisible = true;
      } else if (flag == "delete") {
        if (this.selectionList.length > 0) {
          this.delList(this.selectionList);
        } else {
          this.$message.warning("请先选择表单数据项后再删除！");
        }
      }
      this.addEditFlag = flag;
    },
    //关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
      this.queryPageByCondition();
    },
  },
};
</script>
<style lang="scss" scoped>
.pointer {
  cursor: pointer;
}

.all-count {
  height: 80px;
  display: flex;
  padding-left: 10px;
  margin: 5px 0;

  .allbox {
    width: 320px;
    display: flex;
    background: linear-gradient(to bottom, #68eacf, #15a8bc);
    margin-right: 25px;
    border-radius: 8px;

    .left {
      width: fit-content;
      padding: 26px;
      border-right: 1px dotted #fff;
    }

    .right {
      width: calc(100% - 40px);
      display: flex;
      line-height: 80px;
      justify-content: center;

      &>div {
        font-size: 22px;

        &:first-child {
          margin-right: 10px;
        }
      }
    }
  }
}
::v-deep .el-row{
  height: 100%;
  .el-col{
    height: 100%;
  }
}
</style>